$btn-disable: #e8e8e8;
$btn-normal: #ffdd00;
$btn-highlight: #ffc600;

//广告栏
.swiper-container {
  height: 100%;
}
.swiper-slide {
  display: flex;
  img {
    width: 100%;
  }
}

.red {
  color: #ff4f4f;
}

.btn {
  border-radius: rem(5px);
  text-align: center;
  font-size: rem(26px);
  line-height: rem(56px);
  color: #333333;
}

.btn-green {
  background-color: #8ad555;
  &:active {
    background-color: #58b927;
  }
}

.btn-yellow {
  background-color: #ffdd00;
  &:active {
    background-color: #ffc600;
  }
}

.btn-default {
  position: relative;
  &:before {
    position: absolute;
    top: 0; left: 0;
    display: block;
    content: "";
    border: 1px solid #bbb;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    border-radius: 3px;
  }
  background-color: #fff;
  &:active {
    background-color: #e8e8e8;
  }
}

.btn-white {
  background-color: #fff;
  &:active {
    background-color: #e8e8e8;
  }
}

.tip {
  position: absolute;
  top: rem(170px);
  left: rem(75px);
  right: rem(75px);
  z-index: 10;
  &:before {
    position: absolute;
    top: -6px;
    left: rem(452px);
    display: block;
    content: "";
    border-bottom: 6px solid rgba(0, 0, 0, .85);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  border-radius: rem(10px);
  background-color: rgba(0, 0, 0, .85);
  padding: rem(32px);
  li {
    list-style-type: disc;
    color: #FFF;
    font-size: rem(30px);
    line-height: rem(40px);
    margin-left: rem(32px);
    &:nth-child(2) {
      margin-top: rem(10px);
    }
  }
}

.base-info {
  position: relative;
  width: 100%;
  height: rem(202px);
  padding: rem(23px);
  &:after {
    display: block;
    content: " ";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    transform: scaleY(.5);
    border-bottom: 1px solid #e8e8e8;
  }

  .btn-renew {
    display: none;
  }

  .group-name {
    font-size: rem(28px);
    line-height: rem(28px);
    color: #666666;
  }

  .rank {
    position: absolute;
    top: rem(23px); right: rem(18px);
    width: rem(130px);
    height: rem(66px);
    background-image: url(../images/no.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: #FFF;
    font-size: rem(24px);
    padding-top: rem(5px);
    line-height: rem(24px);
  }

  .group-info {
    margin-top: rem(24px);
    .avatar {
      width: rem(96px);
      height: rem(96px);
      border-radius: rem(96px); 
      background-color: #666;
      overflow: hidden;
      background-size: cover;
      background-image: url(http://ued.yypm.com/96);
      float: left;
    }
    .base {
      padding-top: rem(6px);
      line-height: rem(32px);
      .name {
        font-size: rem(32px);
        color: #000;
      }
      .total {
        font-size: rem(24px);
        color: #666;
      }
      .count {
        font-size: rem(24px);
        color: #ff4f4f;
        margin-left: rem(10px);
      }
    }
    .level {
      position: relative;
      margin-top: rem(15px);
      .lv {
        margin-top: rem(-4px);
        margin-right: rem(10px);
        float: left;
        border-radius: rem(15px);
        color: #5a68d1;
        border: 1px solid #5a68d1;
        text-align: center;
        height: rem(28px);
        font-size: rem(20px);
        line-height: rem(28px);
        width: rem(55px);
        max-width: rem(60px);
      }
      .progress-bar {
        position: relative;
        width: rem(420px);
        height: rem(20px);
        background-color: #e3e3e3;
        border-radius: rem(15px);
        overflow: hidden;
        .progress {
          position: absolute;
          top: 0; left: 0; bottom: 0;
          width: 50%;
          height: rem(20px);
          background-color: #5a68d1;
          z-index: 0;
        }
        .text {
          position: relative;
          line-height: 1;
          font-size: rem(18px);
          line-height: rem(20px);
          color: #010101;
          text-align: center;
          z-index: 1;
        }
      }
      .question {
        position: absolute;
        right: rem(-20px); top: rem(-16px);
        width: rem(50px);
        height: rem(50px);
        background-size: rem(24px) rem(24px);
        background-position: center;
        background-image: url(../images/qm.png);
        background-repeat: no-repeat;
      }
    }
    .right-info {
      width: rem(625px);
      padding-left: rem(115px);
    }
  }

}

.content {
  padding: rem(25px);
  .desc {
    font-size: rem(28px);
    color: #333333;
  }
  .intros {
    height: rem(180px);
    // background-image: url(http://ued.yypm.com/702x180);
    // background-size: 100% 100%;
    margin: rem(16px) 0;
  }

  .prices {
    display: flex;
    height: rem(110px);
    flex-direction: row;
    align-items: stretch;
    .price {
      position: relative;
      flex: 1;
      overflow: hidden;
      background-color: $btn-normal;
      margin-right: rem(16px);
      border-radius: rem(8px);
      &:active {
        background-color: $btn-highlight;
      }
      &:last-child {
        margin-right: 0;
      }
      .discount {
        position: absolute;
        right: 0; top: 0;
        width: rem(50px);
        /* height: rem(25px); */
        background-color: #ff4f4f;
        text-align: center;
        font-size: rem(18px);
        line-height: rem(25px);
        /*padding-top: rem(8px);*/
        color: #FFF;
      }

      .time {
        margin-top: rem(25px);
        font-size: rem(24px);
        color: #000;
        text-align: center;
        line-height: rem(24px);
      }
      .yprice {
        margin-top: rem(5px);
        font-size: rem(34px);
        color: #333333;
        text-align: center;
        font-weight: bold;
      }
    }
  }
}

.base-info.is-open {
  
  .btn-renew {
    display: block;
    position: absolute;
    width: rem(120px);
    right: rem(25px);
    top: rem(110px);
  }

  .right-info {
    width: rem(520px);
    .progress-bar {
      width: rem(320px);
    }
  }

}

.content {
  .head {
    .text {
      font-size: rem(28px);
      color: #333;
      line-height: rem(40px);
      &.red {
        color: #ff4f4f;
        margin-left: rem(5px);
        font-weight: bold;
      }
    }
    .fan-rank-list {
      position: relative;
      display: inline-block;
      text-align: center;
      color: #ff4f4f;
      border-radius: rem(5px);
      // border: 1px solid #ff4f4f;
      width: rem(125px);
      font-size: rem(26px);
      line-height: rem(40px);
      &:before {
        position: absolute;
        top: 0; left: 0;
        display: block;
        content: "";
        border: 1px solid #ff4f4f;
        width: 200%;
        height: 200%;
        transform: scale(.5);
        transform-origin: 0 0;
        border-radius: 3px;
      }
    }
  }

  .body {
    .task-list {
      margin-top: rem(18px);
      .task-item {
        position: relative;
        padding: rem(20px);
        border-radius: rem(8px);
        box-shadow: 0 0 2px rgba(0, 0, 0, .15);
        height: rem(130px);
        margin-bottom: rem(16px);

        background-color: #FFF;
        &.done {
          border: 1px solid #e8e8e8;
          background-color: #fafafa;
          box-shadow: none;
          .point {
            color: #8ad555 !important;
            .tick {
              display: block;
            }
            &.login .text.small {
              display: none;
            }
          }
        }
        
        .icon {
          float: left;
          background-repeat: no-repeat;
          width: rem(100px);
          height: rem(100px);
          background-size: contain;
          &.login {
            background-image: url(../images/icon-login.png);
          }
          &.gift {
            background-image: url(../images/icon-gift.png);
          }
        }
        .item-right {
          margin-left: rem(120px);
          p {
            margin: rem(13px) 0;
          }
          .title {
            color: #333;
            font-size: rem(28px);
          }
          .desc {
            color: #666;
            font-size: rem(24px);
          }
        }

        .point {
          position: absolute;
          right: rem(20px);
          top: rem(30px);
          color: #999;
          width: rem(110px);
          text-align: center;

          .tick {
            display: none;
            background-image: url(../images/tick.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: rem(57px);
            height: rem(37px);
            margin: rem(-10px) auto rem(15px);
          }
          &.gift {
            .large {
              margin-top: rem(15px);
            }
          }
          .text {
            &.large {
              font-size: rem(32px);
              font-weight: 500;
            }
            &.small {
              margin-top: rem(10px);
              font-size: rem(24px);
              &:nth-child(1) {
                margin-top: rem(25px);
              }
            }
          }
        }
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: 10;
}

.dialog {
  position: absolute;
  width: rem(560px);
  left: 50%; top: rem(100px);
  margin-left: rem(-560px / 2);
  z-index: 10;
  .bold {
    font-weight: 600;
  }
  .dialog-body {
    background-image: url(../images/pop-success.png);
    background-repeat: no-repeat;
    background-size: rem(560px) rem(256px);
    padding-top: rem(145px);
    width: rem(560px);
    height: rem(256px);
    .text {
      font-size: rem(28px);
      text-align: center;
      color: #FFF;
    }
    .date {
      color: #ffdd00;
      margin-left: rem(5px);
    }
  }
  .dialog-footer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    height: rem(90px);
    border-bottom-left-radius: rem(15px);
    border-bottom-right-radius: rem(15px);
    .button {
      flex: 1;
      position: relative;
      text-align: center;
      font-size: rem(32px);
      color: #333;
      line-height: rem(90px);
      &:nth-child(2) {
        &:before {
          position: absolute;
          display: block;
          content: "";
          top: 0; left: 0;
          width: 1px;
          height: 100%;
          transform: scaleX(.5);
          border-left: 1px solid #e8e8e8;
        }
      }
    }
  }
}

.navigator {
  position: relative;
  height: rem(88px);
  text-align: center;
  line-height: rem(88px);
  &:after {
    position: absolute;
    display: block;
    content: '';
    border-bottom: 1px solid #e8e8e8;
    transform: scaleY(.5);
    bottom: 0;
    left: 0;
    right: 0;
  }
  .back {
    position: absolute;
    left: 0; top: 0;
    width: rem(80px);
    height: rem(88px);
    background-image: url(../images/btn-back.png);
    background-repeat: no-repeat;
    background-size: rem(43px) rem(36px);
    background-position: center;
  }
  .title {
    font-size: rem(32px);
    text-align: center;
    font-weight: bold;
  }
}